<template>
  <div class="upload-list">
    <transition-group
      tag="ul"
      :class="[
      'el-upload-list',
      'el-upload-list--' + listType,
      { 'is-disabled': disabled }
    ]"
      name="el-list"
    >
      <li
        v-for="(file, index) in files"
        :class="['el-upload-list__item', focusing ? 'focusing' : '']"
        :key="file.id || file.fileId || index"
        tabindex="0"
        @keydown.delete="!disabled && $emit('remove', file)"
        @focus="focusing = true"
        @blur="focusing = false"
        @click="focusing = false"
      >
        <slot :file="file">
          <img
            class="el-upload-list__item-thumbnail"
            v-if="['picture-card', 'picture'].indexOf(listType) > -1"
            :src="getUrl(file)" alt=""
          >
          <a class="el-upload-list__item-name" @click="handleClick(file)">
            <i class="el-icon-document"></i>{{file.oriFileName}}
          </a>
          <label class="el-upload-list__item-status-label">
            <i :class="{
            'el-icon-upload-success': true,
            'el-icon-circle-check': listType === 'text',
            'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
          }"></i>
          </label>
          <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
          <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
          <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
          <span
            class="el-upload-list__item-preview"
            v-if="handlePreview && listType === 'picture-card'"
            @click="handlePreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="$emit('remove', file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
        </slot>
      </li>
    </transition-group>
  </div>
</template>
<script>
import uploadList from 'element-ui/packages/upload/src/upload-list'
import {API_HOST, NGINX_HOST} from '@/constant'
export default {
  name: 'upload-list',
  cnName: '重写file-list',
  extends: uploadList,
  props: {
    ...uploadList.props
  },
  data() {
    return {
      host: API_HOST,
      nginxHost: NGINX_HOST
    }
  },
  methods: {
    getUrl(file) {
      const {url, filePath} = file
      if(url.indexOf('http') === 0) {
        return url
      }
      if(this.nginxHost && filePath) {
        return this.nginxHost + '' + filePath
      }
      return this.host + '' + url
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-list {
}
</style>
